<template>
  <div class="table-column-setting">
    <div class="setting-bar">
      <el-button icon="CirclePlus" @click="addColumnSetList">{{ $demoi18n('panel.label.event.add') }}</el-button>
      <el-tooltip
        class="item"
        :effect="xvueTheme"
        :content="content"
        placement="top-start"
      >
        <el-button
          :link="true"
          type="primary"
          :style="{ marginLeft: '5px' }"
        >
          <el-icon><InfoFilled /></el-icon>
        </el-button>
      </el-tooltip>
    </div>
    <el-table
      v-if="modelValue?.length"
      class="config-panel-table mapping-table"
      :data="modelValue"
      :row-style="{ height: '25px' }"
      :header-row-style="{ height: '25px' }"
      max-height="500"
      :header-cell-style="{ lineHeight: '15px' }"
    >
      <el-table-column
        :label="$demoi18n('panelData.mapping.field')"
        :min-width="120"
      >
        <template #default="scope">
          <VsFormItem>
            <ValueInputer v-model:value="scope.row.name" :enumValues="getFieldList()" />
          </VsFormItem>
        </template>
      </el-table-column>
      <el-table-column
        v-if="showIcon"
        prop="icon"
        :label="$demoi18n('word.icon')"
        width="45"
      >
        <template #default="scope">
          <IconEditor
            :icon="scope.row.icon"
            :component-style="form.componentStyle"
            :has-sync="true"
            @save="saveIcon($event, scope.row)"
            @delete="deleteIcon($event, scope.row)"
            @sync="syncIcons($event, form.group)"
          />
        </template>
      </el-table-column>
      <el-table-column
        :label="$demoi18n('word.columnBackgroundColor')"
        :min-width="80"
      >
        <template #default="scope">
          <el-color-picker
            v-model="scope.row.backgroundColor"
            :popper-class="'vis-color-picker-panel-' + xvueTheme"
            size="default"
            :predefine="predefineColors"
            :style="{ 'vertical-align': 'bottom' }"
          ></el-color-picker>
        </template>
      </el-table-column>
      <el-table-column
        :label="$demoi18n('textColor')"
        :min-width="80"
      >
        <template #default="scope">
          <el-color-picker
            v-model="scope.row.color"
            :popper-class="'vis-color-picker-panel-' + xvueTheme"
            size="default"
            :predefine="predefineColors"
            :style="{ 'vertical-align': 'bottom' }"
          ></el-color-picker>
        </template>
      </el-table-column>
      <el-table-column
        :label="$demoi18n('echart.label.textSize')"
        :min-width="130"
      >
        <template #default="scope">
          <VsFormItem>
            <Range
              v-model:value="scope.row.fontSize"
              :min="12"
              :max="80"
              type="input"
            />
          </VsFormItem>
        </template>
      </el-table-column>
      <el-table-column
        :label="$demoi18n('echart.label.bold')"
        :min-width="100"
      >
        <template #default="scope">
          <VsFormItem>
            <ValueInputer v-model:value="scope.row.fontWeight" :enumValues="fontWeightOptions" valueType="List" />
          </VsFormItem>
        </template>
      </el-table-column>
      <el-table-column :min-width="50">
        <template #default="scope">
          <el-button
            icon="Delete"
            :link="true"
            type="primary"
            :disabled="limit===modelValue.length"
            @click.stop="deleteCurRow(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { fontWeightOptions } from '@/components/common/echart/form-item-options.js';
import IconEditor from '@/components/common/icon/icon-editor.vue';
import Range from '@/components/common/range/range.vue';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import imgUploadBase from '@/mixin/img-upload-base.js';

export default {
  name: 'ColumnSetting',
  components: { ValueInputer, IconEditor, Range },
  mixins: [imgUploadBase],
  props: {
    modelValue: {
      type: Array,
      default: ()=>[],
    },
    fieldList: {
      type: Array,
      default: ()=>[],
    },
    form: {
      type: Object,
      default: ()=>({}),
    },
    showIcon: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: 0,
    },
    name: {
      type: String,
      default: '',
    },
  },
  emits: ['update:modelValue'],
  data() {
    return {
      xvueTheme: window._adoPremise.uc.theme,
      predefineColors: ['#ff5071'],
      fontWeightOptions,
    };
  },
  computed: {
    content() {
      return this.name === 'groupWithIconList' ? this.$demoi18n('word.rowColumnSettingTip1') : this.$demoi18n('word.rowColumnSettingTip');
    },
  },
  methods: {
    getFieldList() {
      const selectedNames = (this.modelValue || []).map(n => n.name);

      const list = this.fieldList.filter(n => {
        const name = (typeof n === 'object') ? n.value : n;
        return !selectedNames.includes(name);
      });
      return list;
    },
    addColumnSetList() {
      const index = this.modelValue?.length ?
        Math.max(...this.modelValue?.map((item, idx)=>(item.index || idx + 1))) + 1 :
        1;
      const backgroundList = {
        light: '#fff',
        dark: '#12263a',
        real: '#232323',
      };
      const fontColor = {
        light: '#606266',
        dark: '#fff',
        real: '#fff',
      };
      const { componentStyle = 'light' } = this.form;
      const rowData = { index, name: '', backgroundColor: backgroundList[componentStyle], color: fontColor[componentStyle], fontSize: '12', fontWeight: 'normal',
        icon: '',
        iconSmall: '',
        uploadList: [],
        children: [],
        imgUrl: '',
      };
      const tableData = [...this.modelValue, rowData];
      this.$emit('update:modelValue', tableData);
    },
    deleteCurRow(row) {
      const { index } = row;
      const tableData = this.modelValue.filter(item=>item.index !== index);
      this.$emit('update:modelValue', tableData);
    },
  },
};
</script>
<style lang="less" scoped>
.table-column-setting{
  min-height: 70px;
  padding-left: 10px;
  .setting-bar{
    margin-bottom: 8px;
  }
}
</style>
